<template>
	<view>
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				
				<view class="item">
					<image :src="item.data" class="collect-image"  
					@tap="showPic(item.data)"
					v-if="item.type == 'image'" ></image>
					
					<view class="content bg-green" v-if="item.type == 'mp3'" @tap="playVoice(item)">
						<text style="width:100rpx"></text>
						<text class="wlIcon-yuyinzuo text-xxl padding-left-xl"></text>
					</view>
					
					<view class="footer">
						<view class="btn1" @click="transferFriend(item.data, item.type)">转发好友</view>
						<view class="btn1" @click="transferGroup(item.data, item.type)">转发群聊</view>
						<view class="btn2" @click="deleteCollect(item.id, index)">删除</view>
						
						<!-- <image 
						src="/static/images/delete.png" class="delete-image"></image> -->
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
</template>


<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			dataList:[
				// {
				// 	memo:'昵称',
				// 	wallet: 100,
				// 	createtime:'13284845555',
				// }
			],
			//播放语音相关参数
			AUDIO: uni.createInnerAudioContext(),
			playMsgid: null,
			
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
		
	},
	// 触底加载更多
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getList();
		}
	},
	methods: {
		// 播放语音
		playVoice(message) {
			console.log("go playVoice", message);
			this.playMsgid = message.id;
			this.AUDIO.src = message.data;
			this.$nextTick(() => {
				this.AUDIO.play();
			});
		},
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/user/collectlist',
				data: {
					page: this.current_page,
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		},
		deleteCollect(id, index){
			uni.showModal({
				content: "确认删除？",
				confirmText: '确认',
				success: (res)=> {
					if (res.confirm) {
						
						uni.request({
							url: '/user/collectdeel',
							data: {
								id: id
							},
							success: res => {
								res = res.res;
								if (res.code === 1) {
									this.dataList.splice(index, 1);
								}
							}
						});
					}
				}
			});
		},
		// 预览图片
		showPic(url) {
			uni.previewImage({
				indicator: 'none',
				current: url,
				urls: [url]
			});
		},
		transferFriend(data, type){
			let tmp = {
				content:{},
			};
			tmp.content.url = data;
			if(type=='mp3'){
				uni.setStorageSync('one_voice_message', tmp);
			}
			if(type=='image'){
				uni.setStorageSync('one_image_message', tmp);
			}
			
			uni.redirectTo({
				url: '/pages/new/chat-choose',
			})
		},
		transferGroup(data, type){
			let tmp = {
				content:{},
			};
			tmp.content.url = data;
			if(type=='mp3'){
				uni.setStorageSync('more_voice_message', tmp);
			}
			if(type=='image'){
				uni.setStorageSync('more_image_message', tmp);
			}
			
			uni.redirectTo({
				url: '/pages/new/chatgroup-choose',
			})
		}
	}
}
</script>


<style scoped>
.list{
	padding: 30rpx;
}	
.item{
	margin-top: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
}	
.collect-image{
	width: 200rpx;
	height: 200rpx;
	border-radius: 16rpx;
}
.footer{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 10rpx;
}	
.delete-image{
	width: 30rpx;
	height: 30rpx;
}
.content{
	padding: 20rpx;
	border-radius: 6rpx;
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	font-size: 32rpx;
	position: relative;
	min-height: 84rpx;
	line-height: 42rpx;
	text-align: left;
	border-radius: 10rpx 32rpx 32rpx 32rpx
}

.btn1{
	width: 140rpx;
	height: 60rpx;
	border-radius: 30rpx;
	border: 2rpx solid #000;
	margin-right: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn2{
	width: 140rpx;
	height: 60rpx;
	border-radius: 30rpx;
	border: 2rpx solid red;
	display: flex;
	align-items: center;
	justify-content: center;
	color:red;
}
</style>